<template>
  <el-card>
    <el-row :gutter="20">
      <el-col :span="4"
        ><el-input v-model="queryForm.id" placeholder="用户id" clearable
      /></el-col>
      <el-col :span="4"
        ><el-input v-model="queryForm.name" placeholder="用户名称" clearable
      /></el-col>
      <el-col :span="4"
        ><el-input v-model="queryForm.age" placeholder="用户年龄" clearable
      /></el-col>
      <el-button type="primary" @click="initGetUserList">查询</el-button>
      <el-button type="primary" @click="add">新增</el-button>
    </el-row>
  </el-card>

  <el-card>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column
        v-for="(item, index) in columns"
        :prop="item.prop"
        :label="item.label"
        :key="index"
        :width="item.with"
      >
        <template v-slot="{ row }" v-if="item.prop === 'isDel'">
          <el-switch
            plain
            :inactive-value="0"
            :active-value="1"
            v-model="row.isDel"
            @click="changeValue(row)"
          />
        </template>
        <template v-slot="{ row }" v-if="item.prop === 'timeMillions'">
          {{ $filters.filterTime(row.timeMillions) }}
        </template>

        <template #default="{ row }" v-if="item.prop === 'action'">
          <el-button-group class="ml-4">
            <el-button type="info" @click="detail(row)">详情</el-button>
            <el-button type="primary" @click="update(row)">修改</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-card>
    <el-pagination
      v-model:current-page="queryForm.pageNo"
      v-model:page-size="queryForm.pageSize"
      :page-sizes="[2, 10, 50, 100]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="queryForm.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
  <AddUser
    v-model="addDialogVisible"
    @initGetUserList="initGetUserList"
    :dialogTitle="dialogTitle"
  ></AddUser>
  <UpdateUser
    v-model="updateDialogVisible"
    @initGetUserList="initGetUserList"
    :dialogTitle="dialogTitle"
    :rowvalue="rowvalue"
  ></UpdateUser>
  <Detail
    v-model="detailDialogVisible"
    :dialogTitle="dialogTitle"
    :rowvalue="rowvalue"
  />
</template>
<script setup>
import { Delete, Edit, Search, Share, Upload } from "@element-plus/icons-vue";
import { ref, toRaw } from "vue";
import { columns } from "./userColumn.js";
import { getUserList, changeUserState } from "@/api/user.js";
import AddUser from "./add.vue";
import UpdateUser from "./update.vue";
import Detail from "./detail.vue";
// 搜索时，提交的表单内容
const queryForm = ref({
  id: null,
  name: "",
  age: null,
  pageNo: 1,
  pageSize: 2,
  total: 0,
});

const tableData = ref([]);
const initGetUserList = async () => {
  if (queryForm.value.name == "") {
    queryForm.value.name = null;
  }
  const res = await getUserList(queryForm.value);
  tableData.value = res.data.data;
  queryForm.value.total = res.data.total;
  console.log(res.data.data);
};
initGetUserList();
const handleSizeChange = (val) => {
  queryForm.value.pageNo = 1;
  queryForm.value.pageSize = val;
  initGetUserList();
};
const handleCurrentChange = (val) => {
  queryForm.value.pageNo = val;
  initGetUserList();
};

const addDialogVisible = ref(false);
const updateDialogVisible = ref(false);
const detailDialogVisible = ref(false);
const dialogTitle = ref("");

const add = () => {
  addDialogVisible.value = true;
  dialogTitle.value = "新增";
};

const rowvalue = ref({});
const update = (row) => {
  updateDialogVisible.value = true;
  dialogTitle.value = "修改";
  rowvalue.value = JSON.parse(JSON.stringify(row));
};

const detail = (row) => {
  detailDialogVisible.value = true;
  dialogTitle.value = "详情";
  rowvalue.value = JSON.parse(JSON.stringify(row));
};

const changeValue = (row) => {
  open(row);
};

// 删除用户时的弹窗
const open = (row) => {
  const msg = row.isDel == 0 ? "停用" : "启用";
  ElMessageBox.confirm("确定" + msg + "?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then((action) => {
      console.log(action);
      if ("confirm" === action) {
        changeState(row);
        ElMessage({
          type: "success",
          message: msg + "成功",
        });
      }
      if ("cancel" === action) {
        if (row.isDel == 0) {
          row.isDel = 1;
        } else {
          row.isDel = 0;
        }
      }
    })
    .catch(() => {
      if (row.isDel == 0) {
        row.isDel = 1;
      } else {
        row.isDel = 0;
      }
      ElMessage({
        type: "info",
        message: "取消",
      });
    });
};
const changeState = async (data) => {
  const res = await changeUserState(data);
};
</script>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.el-button-group .el-button:not(:last-child) {
  margin-right: 6px;
}
</style>
